<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JS-Corner-03 Canvas</title>
</head>
<style>
    body{
        background:#FFF;
        text-align:center;
    }
    #c1{
        color:#fff;
    }
</style>
<body>
    本页面<strong>需要</strong>启动服务器
    <h1>视频文件:</h1>
    <h2>video</h2>
    <video id='v1' width="320" height="240" controls="controls" src="movie.ogv" autoplay></video>
    <hr>
    <h1>给视频加滤镜</h1>

    <h2>canvas</h2>
    <canvas id="c1" width="320" height="240"></canvas>

    <script>
        window.onload = function(){
            let oV = document.getElementById('v1')
            let oC = document.getElementById('c1')
            let gd = oC.getContext('2d')

            let W = oV.width
            let H = oV.height

            requestAnimationFrame(next)

            function next(){
                gd.drawImage(oV,0,0)

                let imageData = gd.getImageData(0,0,W,H)
                let data = imageData.data

                // (r*w+c)*4+0  => r
                // (r*w+c)*4+1  => g
                // (r*w+c)*4+2  => b
                // (r*w+c)*4+3  => a
                for(let r = 0;r<H;r++){
                    for(let c=0;c<W;c++){
                        data[(r*W+c)*4+0] = data[(r*W+c)*4+1] = data[(r*W+c)*4+2] =
                            (data[(r*W+c)*4+0]+data[(r*W+c)*4+1]+data[(r*W+c)*4+2])/3;
                    }
                }
                gd.putImageData(imageData,0,0)

                requestAnimationFrame(next)
            }
        }
    </script>
</body>
</html>